<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/doc.min.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div th:replace="~{fragment/header :: head}"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <div th:replace="~{fragment/menu :: left}"></div>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <ol class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a th:href="@{/role/list}">数据列表</a></li>
                    <li class="active">修改</li>
                </ol>
                <div class="panel panel-default">
                    <div class="panel-heading">表单数据
                        <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                                class="glyphicon glyphicon-question-sign"></i></div>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="roleName">角色名称</label>
                                <input type="text" class="form-control" id="roleName" value="角色名称"
                                    th:value="${role.roleName}">
                            </div>
                            <button type="button" class="btn btn-success" th:onclick="edit([[${role.id}]])"><i
                                    class="glyphicon glyphicon-edit"></i> 修改</button>
                            <button type="button" class="btn btn-danger" onclick="reset()"><i
                                    class="glyphicon glyphicon-refresh"></i> 重置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/script/docs.min.js}"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:inline="javascript" type="text/javascript">
        var ctxPath = [[${ application.ctxPath }]];
        $(function () {
            $(".list-group-item").click(function () {
                if ($(this).find("ul")) {
                    $(this).toggleClass("tree-closed");
                    if ($(this).hasClass("tree-closed")) {
                        $("ul", this).hide("fast");
                    } else {
                        $("ul", this).show("fast");
                    }
                }
            });
        });

        function edit(id) {
            var roleName = $("#roleName").val();
            if (roleName == "") {
                layer.msg("角色名称不能为空，请输入", { time: 2000, icon: 5, shift: 6 }, function () { });
                return false;
            }
            $.ajax({
                url: ctxPath + "/role/doEdit",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({ roleName: roleName, id :id }),
                success: function (data) {
                    console.log(data);
                    window.location.href = ctxPath + "/role/list";
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseJSON);
                    layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
                }
            })
        }
        function reset() {
            $("#roleName").val([[${role.roleName}]]);
        }
    </script>
</body>

</html>